<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSI餐厅小筑 外卖网</title>
    <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/colors/blue.css" id="theme" rel="stylesheet">
    <!-- react -->
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <!-- 配置文件 -->
    <script src="../config.js"></script>
<body>
    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
    </div>
    <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
            <div class="navbar-collapse">
                <div class="navbar-nav mr-auto mt-md-0">
                    <div class="nav-item"> <a class="navbar-brand" href="https://github.com/LimonSea/CSI-takeout-Course-design-project"><img
                                src="../assets/images/logo.png" class="light-logo" alt="homepage" /></a> </div>
                </div>
                <ul class="navbar-nav my-lg-0">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href=""
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img
                                src="../assets/images/users/1.jpg" alt="user" class="profile-pic" /></a>
                        <div class="dropdown-menu dropdown-menu-right scale-up">
                            <ul class="dropdown-user">
                                <li>
                                    <div class="dw-user-box">
                                        <div class="u-img"><img src="../assets/images/users/1.jpg" alt="user"></div>
                                        <div class="u-text">
                                            <h4>Steave Jobs</h4>
                                            <a href="user-setting.html"
                                                class="btn btn-rounded btn-danger btn-sm">个人设置</a>
                                        </div>
                                    </div>
                                </li>
                                <li role="separator" class="divider"></li>
                                <li><a href="change_password.html"><i class="ti-user"></i>修改密码</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="cart-list.html"><i class=" ti-shopping-cart"></i>我的购物车</a></li>
                                <li><a href="user-order-list.html"><i class="ti-receipt"></i> 我的订单</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="login.html"><i class="fa fa-power-off"></i>退出登录</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <section id="wrapper">
        <div class="login-register" style="background-image:url(../assets/images/background/total4.jpg);">        
            <div class="login-box card">
            <div class="card-body">
              <!---->
              <div id="changepassword"></div>
                
            </div>
          </div>
        </div>
        
    </section>
    <script src="../assets/plugins/jquery/jquery.min.js"></script>
    <script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
    <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/jquery.slimscroll.js"></script>
    <script src="js/waves.js"></script>
    <script src="js/sidebarmenu.js"></script>
    <script src="../assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <script src="../assets/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="js/custom.min.js"></script>
    <script src="../assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
    <script type="text/babel">
      class Changepassword extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            oldPassword: '',
            newPassword:'',
            confirmPassword:''
          }
          this.handleChange = this.handleChange.bind(this)
          this.submit = this.submit.bind(this)
        }
        handleChange(event) {
          this.setState({ [event.target.name]: event.target.value });
          console.log(event.target.name, event.target.value)
        }
        submit(event) {
          if (this.state.confirmPassword === this.state.newPassword) {
          $.ajax({
            type: 'POST',
            url: global.targetUrl+'/user/updatepassword',
            data: {
              'oldPassword': this.state.oldPassword,
              'newPassword':this.state.newPassword
            },
            headers:{
                token:localStorage.token 
            },
            success: function (res) {
              console.log('返回的',res)
              if (res.resultMsg.code === 1000) {
                  alert("成功！");
                  location.href = "login.html";
              }
            }
          })}
          console.log(global.targetUrl)
        }
        render() {
          var oldPassword = this.state.oldPassword;
          var newPassword = this.state.newPassword;
          var confirmPassword = this.state.confirmPassword;
          return (
            <div className="form-horizontal form-material" id="loginform">
                    <h3 className="box-title m-b-20">修改密码</h3>
                    <div className="form-group ">
                      <div className="col-xs-12">
                        <input className="form-control" type="text" required="" placeholder="当前密码" name="oldPassword" value={this.oldPassword} onChange={this.handleChange}/>
                      </div>
                    </div>
                    <div className="form-group">
                      <div className="col-xs-12">
                        <input className="form-control" type="text" required="" placeholder="新的密码" name="newPassword" value={this.newPassword} onChange={this.handleChange}/>
                      </div>
                    </div>
					<div className="form-group">
                      <div className="col-xs-12">
                        <input className="form-control" type="text" required="" placeholder="确认密码" name="confirmPassword" value={this.confirmPassword} onChange={this.handleChange}/>
                      </div>
                    </div>
                    <div className="form-group text-center m-t-20">
                      <div className="col-xs-12">
                        <button className="btn btn-success" onClick={this.submit}>提交</button>
                        <a href="user-setting.html" ><button className="btn btn-secondary">返回</button></a>
                        </div>
                    </div>
                  </div>
          )
        }
      }
      ReactDOM.render(
        <Changepassword />,
        document.getElementById('changepassword')
      )
    </script>
</body>

</html>